<template>
	<el-form ref="ruleFormRef" :model="data" status-icon :rules="rules" label-width="0px" class="ruleForm">
		<el-form-item class="animation1" prop="username">
			<el-input v-model="data.username" clearable type="text" maxlength="11" autocomplete="off" :placeholder="$t('system.account')">
				<template #prefix>
					<el-icon size="18">
						<component :is="'User'"></component>
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="animation2" prop="password">
			<el-input
				v-model="data.password"
				clearable
				show-password
				maxlength="12"
				type="password"
				autocomplete="off"
				:placeholder="$t('system.password')"
			>
				<template #prefix>
					<el-icon size="18">
						<component :is="'Lock'"></component>
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="animation3">
			<el-checkbox v-model="data.select">{{ $t('system.remember') }}</el-checkbox>
		</el-form-item>
		<el-form-item class="animation4">
			<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('system.login') }}</el-button>
		</el-form-item>
	</el-form>
	<div class="type animation5">
		<button @click="change('code')">{{ $t('system.codeLogin') }}</button>
		<button @click="change('register')">{{ $t('system.register') }}</button>
	</div>
</template>
<script setup lang="ts">
import { Login } from '@/types/data';
import { HOME } from '@/common/static';
import { ElNotification, type FormInstance, type FormRules } from 'element-plus';
import { verifyUser, verifyPass, addStorage } from './verify';
import { Local } from '@/utils/storage';
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const { t } = useI18n();
const data: Login = reactive({
	username: '',
	password: '',
	select: false,
});
const rules = reactive<FormRules<typeof data>>({
	username: [{ validator: verifyUser, trigger: 'blur' }],
	password: [{ validator: verifyPass, trigger: 'blur' }],
});
const emit = defineEmits(['change']);
onMounted(() => {
	getInit();
});
/**
 * @description: 切换登录方式
 * @param {string} value
 */
const change = (value: string) => {
	emit('change', value);
};
/**
 * @description: 登录
 * @param {FormInstance} formEl
 * @return {*}
 */
const submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			if (data.select) {
				addStorage({
					username: data.username,
					password: data.password || '123456',
				});
			}
			Local.set<string>('token', 'token');
			router.push(HOME);
			ElNotification({
				title: 'Success',
				message: t('system.welcome'),
				type: 'success',
			});
		}
	});
};
/**
 * @description: 初始化内容
 */
const getInit = () => {
	const user = Local.get('user');
	if (user) {
		data.username = user.username;
		data.password = user.password;
		data.select = true;
	}
};
</script>
<style lang="scss" scoped>
@import '@/styles/transition.scss';

.ruleForm {
	margin-top: 20px;

	.el-input {
		--el-input-border-radius: 0;

		:deep(.el-input__wrapper) {
			padding: 5px 0;
			box-shadow: 0 1px 0 0 #dcdfe6;
		}

		:deep(.el-input__wrapper.is-focus) {
			box-shadow: 0 1px 0 0 #409eff;

			.el-icon {
				color: #409eff;
			}
		}

		:deep(.el-input__wrapper:hover) {
			box-shadow: 0 1px 0 0 #409eff;
		}
	}

	.el-button {
		width: 80%;
		height: 40px;
		margin: 0 auto;
		border-radius: 30px;
	}
}

.type {
	display: flex;
	align-items: center;
	justify-content: space-between;

	button {
		width: 144px;
		background-color: #fff;
		border: none;
		font-size: 14px;
		height: 34px;
		box-shadow: 0 0 0 1px #dcdfe6;
		border-radius: 2px;
	}

	button:hover {
		cursor: pointer;
	}
}

@media screen and (max-width: 600px) {
	.type button {
		width: 45%;
	}
}

@for $i from 1 through 5 {
	.animation#{$i} {
		opacity: 0;
		animation-name: error-num;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-delay: calc($i/10) + s;
	}
}
</style>
